<script setup lang='ts'>
import ContactItem from './components/ContactItem.vue'
import { getFriendListService } from '@/api/Friend/friend'

const route = useRoute()
const handleClick = (e: any) => {
  // console.log(e.index);
  // chatStore.setFirstChat(e.index)
}

const handleClickFirst = () => {
  console.log('新的朋友')
}

const getFriendList = async () => {
  const res = await getFriendListService()
  console.log(res)
}

onMounted(() => {
  getFriendList()
})


</script>
<template>
  <el-scrollbar class="contact-aside">
    <my-search></my-search>
    <el-menu
      active-text-color="#303133"
      :default-active="route.path ?? ''"
      router
      class="el-menu-vertical-demo menu"
    >
      <el-menu-item class="first" @click="handleClickFirst" index="/home/contact">
        <div class="img">
          <img src="@/assets/icons/add.svg" alt="" />
        </div>
        <p class="name">新的朋友</p>
      </el-menu-item>
      <el-menu-item v-for="i in 16" :key="i" :index="'/home/contact/' + i" @click="handleClick">
        <contact-item :ItemData="i"></contact-item>
      </el-menu-item>
    </el-menu>
  </el-scrollbar>
</template>
<style scoped lang='scss'>
.contact-aside {
  flex: 1;
  .menu {
    background-color: $menu-bg;
    ::v-deep(.el-menu-item) {
      &:hover {
        background-color: $menu-item-hover;
        opacity: 0.6;
      }
    }
    .is-active {
      background-color: $menu-item-active;
    }
    .first {
      display: flex;
      align-items: center;
      .img {
        display: flex;
        justify-content: center;
        align-content: center;
        padding: 10px;
        background-color: $chat;
        border-radius: 4px;
        img {
          width: 20px;
          height: 20px;
        }
      }
      .name {
        margin-left: 10px;
      }
    }
  }
}
</style>